<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bootstrap-table表格客户端分页</title>

	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="css/bootstrap-table.css" />

	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-table.js"></script>
	<script src="js/bootstrap-table-export.js"></script>
	<script src="js/jquery.base64.js"></script>
	<script src="js/tableExport.js"></script>

</head>

<body >
<div id="reportTableDiv" >
	<table id="reportTable"></table>
</div>
<script type="text/javascript">
    //手动制造30条数据
    var datas  = [];
    for(var i=0;i<30;i++){
        datas[i]={"name":"傻逼"+i+"号","age":"年龄："+i+"岁","sex":"男"+i}
    }

    $(function () {
        $('#reportTable').bootstrapTable({
            method: 'get',
            cache: false,
            height: 400,
            striped: true,
            pagination: true,
            pageSize: 20,
            pageNumber:1,
            pageList: [5, 10, 20, 30, 50, 100],
            search: true,
            showColumns: true,
            showRefresh: false,
            showExport: false,
            exportTypes: ['csv','txt','xml'],
            search: true,
            clickToSelect: true,
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            queryParamsType:'',
            queryParams: queryParams,//传递参数（*）
            columns:
                [
                    /*{field:"checked",checkbox:true},*/
                    {field:"name",title:"测试姓名",align:"center",valign:"middle",sortable:"true"},
                    {field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"},
                    {field:"sex",title:"性别",align:"center",valign:"middle",sortable:"true"},
                    {field:"name",title:"测试姓名",align:"center",valign:"middle",sortable:"true"},
                    {field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"},
                    {field:"sex",title:"性别",align:"center",valign:"middle",sortable:"true"},

                    {
                        title: '操作',
                        field: 'id',
                        align: 'center',
                        formatter:function(value,row,index){

                            var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑</button> ';
                            var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">删除</button> ';
                            return e+d;
                        }
                    }
                    /*{
                        field:'ID',
                        title:'操作',
                        width:200,
                        align:'center',
                        valign:'moddle',
                        formatter:actionFormatter,
                    }*/
                ],
            data:datas,
        });
    });
    /* function edit(rowid) {
               alert("进来");
               console.log(rowid);
               alert(typeof rowid);
               alert(rowid);
               alert($("#name").val());
                alert($(this).children('td').eq(1).html());
            };*/
    //操作栏的格式化
    /*function actionFormatter(value, row, index) {
        var id = value;
        var result = "";
        result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"ViewById('" + id + "','" + row.id + "')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
        result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
        return result;
    };
     function ViewById(id,rowid) {
       alert("进来");
       alert(typeof id);
       alert(typeof rowid);
       alert(rowid);
    };

function nihao(id){
    alert(id);
}*/

    //得到查询的参数
    function queryParams (params) {
        alert($("#name").val());
        /*   var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
             pageSize: params.pageSize,  //页面大小
             pageNumber: params.pageNumber, //页码
             username: $("#search_username").val(),
             name:$("#search_name").val(),
             sex:$("#search_sex").val(),
             phone:$("#search_mobile").val(),
             email:$("#search_email").val(),
           };
           return temp;*/
    };

    $(document).ready(function () {
        $('#reportTable tr').click(function () {
            alert($(this).children('td').eq(0).html());
        });
    });
</script>


</body>
</html>
